<template>
    <view class="ganzhi-containter">
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_content" v-for="(item, index) in shizhu" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item" style="background-color: #eeeeee">
        <view class="ganzhi_title border-right">岁年</view>
        <template v-for="(item, index) in niansui">
          <text v-if="index >= 4" class="ganzhi_content" :key="index">{{ item }}</text>
          <text v-if="index==0" class="ganzhi_content border-right" :key="index">
            <view class="nian-sui">{{ item.text }}</view>
            <view class="nian-sui">{{ transformDate(item, 'liuri') }}</view>
          </text>
          <text v-if="index==1" class="ganzhi_content border-right" :key="index">
            <view class="nian-sui">{{ item.text }}</view>
            <view class="nian-sui">{{ transformDate(item, 'liuyue') }}</view>
          </text>
          <text v-if="index==2 || index == 3" class="ganzhi_content border-right" :key="index">
            <view class="nian-sui">{{ item.sui }}岁</view>
            <view class="nian-sui">{{ item.nian }}年</view>
          </text>
        </template>
      </view>
      <view class="ganzhi_item" style="background-color: #cccccc">
        <view class="ganzhi_title border-right">天干</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in tiangan" :key="index" :class="index<4 ? 'border-right' : ''">
          <view :style="fiveElementInfo(item).color">{{item}}</view>
          <view class="ganzhi-content-tips">{{ shishenEllipsis(baziShishen[index]) }}</view>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #eeeeee">
        <view class="ganzhi_title border-right">地支</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in dizhi" :key="index" :class="index<4 ? 'border-right' : ''">
          <view :style="fiveElementInfo(item).color">{{item}}</view>
          <view class="ganzhi-content-tips">
            <view v-for="(e, i) in cangganShishen[index]" :key="i">{{ shishenEllipsis(e) }}</view>
          </view>
        </view>
      </view>
      <view class="ganzhi_item" style="background-color: #dddddd">
        <view class="ganzhi_title border-right">空亡</view>
        <view class="ganzhi_content" v-for="(item, index) in kongwang" :key="index" :class="index<4 ? 'border-right' : ''">{{ item }}</view>
      </view>
    </view>
</template>
<script>
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      },
      dayun: {
        type: Object,
        default: {}
      },
      liunian: {
        type: Object,
        default: {}
      },
      liuyue: {
        type: Object,
        default: {}
      },
      liuri: {
        type: Object,
        default: {}
      },
    },
    watch: {
      dayun: {
        handler(newVal) {
          if (newVal.ganZhi) {
            this.selectedDayun = newVal;
            this.$set(this.niansui, 3, {
              sui: this.selectedDayun.startAge,
              nian: this.selectedDayun.startYear,
            });
            this.$set(this.tiangan, 3, this.selectedDayun.ganZhi[0]);
            this.$set(this.dizhi, 3, this.selectedDayun.ganZhi[1]);
            this.$set(this.baziShishen, 3, this.selectedDayun.shiShen[0]);
            this.$set(this.cangganShishen, 3, this.selectedDayun.cangGanShiShen);
            this.$set(this.kongwang, 3, this.selectedDayun.xunKong);           
          }
        },
        deep: true,
        immediate: true
      },
      liunian: {
        handler(newVal) {
          if (newVal.ganZhi) {
            this.selectedLiunian = newVal;
            this.$set(this.niansui, 2, {
              sui: this.selectedLiunian.age,
              nian: this.selectedLiunian.year,
            });
            this.$set(this.tiangan, 2, this.selectedLiunian.ganZhi[0]);
            this.$set(this.dizhi, 2, this.selectedLiunian.ganZhi[1]);
            this.$set(this.baziShishen, 2, this.selectedLiunian.shiShen[0]);
            this.$set(this.cangganShishen, 2, this.selectedLiunian.cangGanShiShen);
            this.$set(this.kongwang, 2, this.selectedLiunian.xunKong);            
          }
        },
        deep: true,
        immediate: true
      },
      liuyue: {
        handler(newVal) {
          if (newVal.ganZhi) {
            this.selectedLiunian = newVal;
            this.$set(this.niansui, 1, {
              date: this.selectedLiunian.day,
              text: this.selectedLiunian.monthInChinese
            });
            this.$set(this.tiangan, 1, this.selectedLiunian.ganZhi[0]);
            this.$set(this.dizhi, 1, this.selectedLiunian.ganZhi[1]);
            this.$set(this.baziShishen, 1, this.selectedLiunian.shiShen[0]);
            this.$set(this.cangganShishen, 1, this.selectedLiunian.cangGanShiShen);
            this.$set(this.kongwang, 1, this.selectedLiunian.xunKong);            
          }
        },
        deep: true,
        immediate: true
      },
      liuri: {
        handler(newVal) {
          if (newVal.ganZhi) {
            this.selectedLiunian = newVal;
            this.$set(this.niansui, 0, {
              date: this.selectedLiunian.day,
              text: this.selectedLiunian.dayInChinese
            });
            this.$set(this.tiangan, 0, this.selectedLiunian.ganZhi[0]);
            this.$set(this.dizhi, 0, this.selectedLiunian.ganZhi[1]);
            this.$set(this.baziShishen, 0, this.selectedLiunian.shiShen[0]);
            this.$set(this.cangganShishen, 0, this.selectedLiunian.cangGanShiShen);
            this.$set(this.kongwang, 0, this.selectedLiunian.liuRiXunKong);            
          }
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        baziResult: this.result,
        shizhu: ["日期", "流日", "流月", "流年", "大运", "年柱", "月柱", "日柱", "时柱"],
        niansui: ["", "", "", "", "*", "*", "*", "*"],
        baziShishen: ["", "", "", "", "", "", "", ""],
        tiangan: ["", "", "", "", "", "", "", ""],
        dizhi: ["", "", "", "", "", "", "", ""],
        canggan: ["", "", "", "", "", "", "", ""],
        cangganShishen: ["", "", "", "", "", "", "", ""],
        kongwang: ["", "", "", "", "", "", "", ""],
        selectedDayun: {},
        selectedLiunian: {},
        selectedLiuyue: {},
        selectedLiuri: {}
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$set(this.baziShishen, 4, this.baziResult.yearGanShiShen);
        this.$set(this.baziShishen, 5, this.baziResult.monthGanShiShen);
        this.$set(this.baziShishen, 6, this.baziResult.dayGanShiShen);
        this.$set(this.baziShishen, 7, this.baziResult.timeGanShiShen);
        
        this.$set(this.tiangan, 4, this.baziResult.yearGan);
        this.$set(this.tiangan, 5, this.baziResult.monthGan);
        this.$set(this.tiangan, 6, this.baziResult.dayGan);
        this.$set(this.tiangan, 7, this.baziResult.timeGan);
        
        this.$set(this.dizhi, 4, this.baziResult.yearZhi);
        this.$set(this.dizhi, 5, this.baziResult.monthZhi);
        this.$set(this.dizhi, 6, this.baziResult.dayZhi);
        this.$set(this.dizhi, 7, this.baziResult.timeZhi);
        
        this.$set(this.canggan, 4, this.baziResult.yearCangGan);
        this.$set(this.canggan, 5, this.baziResult.monthCangGan);
        this.$set(this.canggan, 6, this.baziResult.dayCangGan);
        this.$set(this.canggan, 7, this.baziResult.timeCangGan);
        

        this.$set(this.cangganShishen, 4, this.baziResult.yearZhiShiShen);
        this.$set(this.cangganShishen, 5, this.baziResult.monthZhiShiShen);
        this.$set(this.cangganShishen, 6, this.baziResult.dayZhiShiShen);
        this.$set(this.cangganShishen, 7, this.baziResult.timeZhiShiShen);
        
        this.$set(this.kongwang, 4, this.baziResult.yearXunKong);
        this.$set(this.kongwang, 5, this.baziResult.monthXunKong);
        this.$set(this.kongwang, 6, this.baziResult.dayXunKong);
        this.$set(this.kongwang, 7, this.baziResult.timeXunKong);
      })
    },
    methods: {
      transformDate(item, type) {
        if (item && item.date != undefined) {
          let arr = item.date.split('-');
          if (type == 'liuyue') {
            return parseInt(arr[1])+'月'
          }
          return parseInt(arr[2])+'日'          
        }
        return ''
      },
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getJiuLongGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      },
      // 十神单字
      shishenEllipsis(text) {
        if (text == '元男' || text == '元女') return text;
        if (text.includes("正官")) return '官';
        if (text.includes("七杀")) return '杀';
        if (text.includes("伤官")) return '伤';
        if (text.includes("正财")) return '财';
        if (text.includes("偏财")) return '才';
        if (text.includes("劫财")) return '劫';
        if (text.includes("正印")) return '印';
        if (text.includes("偏印")) return '枭';
        if (text.includes("比肩")) return '比';
        if (text.includes("食神")) return '食';
      },
      // 选择流日导致农历月份跨月变更
      changeLunarmonth(data) {
        this.$nextTick(() => {
          this.$set(this.niansui, 1, {
            date: data.day,
            text: data.monthInChinese
          });          
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ganzhi-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: bold;
  }

  .ganzhi_item {
    display: flex;
    flex-direction: row;
    // padding: 20rpx 0;
  }

  .ganzhi_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    line-height: 80rpx;
    flex: 1 0;
    box-sizing: border-box;
  }
  
  .border-right {
    border-right: 2rpx solid #999999;
  }

  .ganzhi_content {
    padding: 20rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0;
    min-width: 0;
    font-size: 24rpx;
    line-height: 80rpx;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .nian-sui {
    line-height: 32rpx;
    text-align: center;
  }

  .ganzhi-important {
    font-size: 40rpx;
    align-items: center;
  }
  
  .ganzhi-content-tips {
    height: 100%;
    font-size: 20rpx;
    line-height: 24rpx;
    display: flex;
    flex-direction: column;
  }

  .element-icon {
    width: 36rpx;
    height: 36rpx;
  }

  .ganzhi_content_canggan{
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    line-height: 44rpx;
  }
  .ganzhi_content_cangganShishen {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .shiniandayun-containter {
    display: flex;
    flex-direction: column;
    color: #4b240d;
  }

  .shiniandayun-title {
    font-size: 36rpx;
    color: #808080;
    display: flex;
    padding: 13rpx;
    font-weight: bolder;
    justify-content: center;
  }

  .shiniandayun-detail {
    display: flex;
    flex-direction: row;
    font-size: 22rpx;
    line-height: 58rpx;
  }

  .shiniandayun-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0;
    white-space: nowrap;
  }

  .shiniandayun-item:last-child .shiniandayun_content {
    padding-right: 44rpx;
  }

  .shiniandayun_content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: bolder;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .shiniandayun-item-title {
    color: #6e512e;
    font-size: 28rpx;
    line-height: 56rpx;
    font-weight: bold;
    white-space: nowrap;
    padding: 0px 8rpx 0 44rpx;
    color: rgb(128, 128, 128);
  }

  .dayun-select {
    box-sizing: border-box;
    background-color: #c5a680;
    border-radius: 6rpx;
    padding-top: 0;
    padding-bottom: 0;
    padding: 0 4rpx;
  }

  .dayun-noselect {
    box-sizing: border-box;
    border-radius: 6rpx;
    padding-top: 0;
    padding-bottom: 0;
  }

  .shinian-dayun-title {
    line-height: 96rpx;
  }

  .shinian-dayun {
    flex-direction: column;
    line-height: 48rpx;
  }

  .shinian-shishen {
    flex-direction: column;
    line-height: 48rpx;
  }

  .shiniandayun_explain {
    padding: 8px;
  }

  .liunian-containter {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .liunian-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0;
    font-size: 22rpx;
    font-weight: bold;
    line-height: 40rpx;
    color: #4b240d;
    border-left: 2rpx solid #c9c9c9;
  }

  .liunian-item:last-child {
    margin-right: 44rpx;
    border-right: 2rpx solid #c9c9c9;
  }

  .fucaixigui-containter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 50rpx;
  }

  .fucaixigui_item {
    display: flex;
    flex-direction: column;
    flex: 1 0;
    font-size: 28rpx;
    line-height: 56rpx;
  }

  .fucaixigui_title {
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: bolder;
    color: #808080;
    background-color: #f6f6f6;
  }

  .fucaixigui_content {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4b240d;
    font-weight: bolder;
  }

  .tuiyanshen-containter {
    display: flex;
    margin: 32rpx 55rpx 0;
    padding-bottom: 50rpx;
  }

  .tuiyanshen_left_containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #4b240d;
    font-size: 22rpx;
    line-height: 30rpx;
    flex: 1 0;
    border-radius: 30rpx;
    box-shadow: 0 0 8rpx #666;
  }

  .tuiyanshen_left_item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 12rpx 4rpx;
    flex: 1 0;
  }

  .tuiyanshen_item_title {
    white-space: nowrap;
    font-weight: bolder;
  }

  .tuiyansehn_item_content {
    margin-left: 8rpx;
  }

  .tuiyanshen_right_containter {
    color: #6e512e;
    display: flex;
    flex-direction: column;
    margin-left: 37rpx;
    flex: 1 0;
  }

  .tuiyanshen_right_top_item {
    margin-bottom: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex: 1 0;
    border-radius: 30rpx;
    box-shadow: 0 0 8rpx #666;
  }

  .tuiyanshen_right_bottom_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex: 1 0;
    border-radius: 30rpx;
    box-shadow: 0 0 8rpx #666;
  }

  .tuiyanshen_right_item_title {
    color: #808080;
    font-weight: bolder;
    font-size: 36rpx;
  }

  .tuiyanshen_right_item_content {
    font-size: 28rpx;
    line-height: 32rpx;
    padding-left: 16rpx;
    padding-right: 16rpx;
    justify-content: center;
    align-items: center;
  }

  .ad-box {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 30rpx;
  }

  .ad-content {
    width: 640rpx;
    height: 181rpx;
    box-shadow: 0 0 10rpx #666;
    background-color: #c6a680;
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .ad-box-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
  }

  .tips-title {
    font-size: 36rpx;
  }

  .tips-des {
    font-size: 28rpx;
  }

  .ad-btn {
    width: 240rpx;
    height: 50rpx;
    background-color: #ffffff;
    border-radius: 25rpx;
    color: #4b240d;
    font-weight: bold;
    text-align: center;
    margin-top: 15rpx;
    font-size: 28rpx;
    line-height: 46rpx;
  }
</style>